<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志愿时长统计管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .btn {
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        .btn-success {
            background-color: #28a745;
            color: white;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .error {
            color: #dc3545;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>工时统计管理系统</h1>

        <!-- 操作按钮 -->
        <div>
            <button class="btn btn-success" id="refreshBtn">刷新数据</button>
        </div>

        <!-- 工时统计列表 -->
        <div id="content">
            <div class="loading" id="loading">加载中...</div>
            <table id="hourStatisticsTable" style="display: none;">
                <thead>
                    <tr>
                        <th>统计ID</th>
                        <th>用户ID</th>
                        <th>年份</th>
                        <th>月份</th>
                        <th>所属学院</th>
                        <th>总工时</th>
                        <th>更新时间</th>
                    </tr>
                </thead>
                <tbody id="hourStatisticsTableBody">
                    <!-- 数据将通过JavaScript动态填充 -->
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // API基础URL
        const BASE_URL = '/hour_statistics';

        // DOM元素
        const refreshBtn = document.getElementById('refreshBtn');
        const loadingElement = document.getElementById('loading');
        const hourStatisticsTable = document.getElementById('hourStatisticsTable');
        const hourStatisticsTableBody = document.getElementById('hourStatisticsTableBody');

        // 页面加载时获取所有工时统计信息
        document.addEventListener('DOMContentLoaded', function() {
            loadAllHourStatistics();
        });

        // 刷新按钮事件
        refreshBtn.addEventListener('click', loadAllHourStatistics);

        // 获取所有工时统计信息
        function loadAllHourStatistics() {
            // 显示加载状态
            showLoading();

            fetch(`${BASE_URL}/list`)
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        renderHourStatisticsTable(data.data);
                    } else {
                        showError('获取数据失败: ' + data.msg);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showError('获取数据时发生错误');
                });
        }

        // 显示加载状态
        function showLoading() {
            loadingElement.style.display = 'block';
            loadingElement.textContent = '加载中...';
            loadingElement.className = 'loading';
            hourStatisticsTable.style.display = 'none';
        }

        // 显示错误信息
        function showError(message) {
            loadingElement.style.display = 'block';
            loadingElement.textContent = message;
            loadingElement.className = 'error';
            hourStatisticsTable.style.display = 'none';
        }

        // 渲染工时统计表格
        function renderHourStatisticsTable(hourStatistics) {
            // 隐藏加载状态
            loadingElement.style.display = 'none';
            hourStatisticsTable.style.display = 'table';

            // 清空表格内容
            hourStatisticsTableBody.innerHTML = '';

            // 检查是否有数据
            if (!hourStatistics || hourStatistics.length === 0) {
                const row = document.createElement('tr');
                row.innerHTML = '<td colspan="7" style="text-align: center;">暂无数据</td>';
                hourStatisticsTableBody.appendChild(row);
                return;
            }

            // 填充表格数据
            hourStatistics.forEach(stat => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${stat.stat_id || ''}</td>
                    <td>${stat.user_id || ''}</td>
                    <td>${stat.year || ''}</td>
                    <td>${stat.month || ''}</td>
                    <td>${stat.college || ''}</td>
                    <td>${stat.total_hours || 0}</td>
                    <td>${stat.update_time ? formatDate(stat.update_time) : ''}</td>
                `;
                hourStatisticsTableBody.appendChild(row);
            });
        }

        // 格式化日期时间
        function formatDate(dateTimeString) {
            if (!dateTimeString) return '';
            const date = new Date(dateTimeString);
            return date.toLocaleString('zh-CN');
        }
    </script>
</body>
</html>
